<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript" src="javascript/jquery.autocomplete.js"></script>
<script type="text/javascript">

/*
		var completeDiv;
		var inputField;
		var nameTable;
		var nameTableBody;
		


        function initVars() {
            inputField = document.getElementById("names");
            nameTable = document.getElementById("name_table");
            completeDiv = document.getElementById("popup");
            nameTableBody = document.getElementById("name_table_body");
        }
        

		// ajax calling
		function findWord(form)	{
			 initVars();
			if (inputField.value.length > 0) {
				submitPost(form, makeNameCallback);
            } else {
                clearNames();
            }
		}
		// callback function
		function makeNameCallback(data){
			setNames(data.matchedName);
		}

		 

        function clearNames() {
            for (var i = nameTableBody.childNodes.length - 1; i >= 0 ; i--) {
                 nameTableBody.removeChild(nameTableBody.childNodes[i]);
            }
            completeDiv.style.border = "none";
            inputField.value = "";
        }

        function setNames(namesArray) {
            clearNames();
            var size = namesArray.length;
            setOffsets();

            var row, cell1,cell2, txtNode;
            $.each(namesArray, function(index,nameData){
                row = document.createElement("tr");
                cell1 = document.createElement("td");
                //1
                cell1.onmouseout = function() {this.className='mouseOver';};
                cell1.onmouseover = function() {this.className='mouseOut';};
                cell1.setAttribute("bgcolor", "#FFFAFA");
                cell1.setAttribute("border", "0");
                cell1.onclick = function() { populateName(this); } ;

                //영문 필드 가져옴
                txtNode = document.createTextNode(nameData.stdNameEng);

                cell1.appendChild(txtNode);
                //alert(nameData.id+" : "+nameTableBody);
                row.appendChild(cell1);

                //2

                cell2 = document.createElement("td");

                cell2.onmouseout = function() {this.className='mouseOver';};
                cell2.onmouseover = function() {this.className='mouseOut';};
                cell2.setAttribute("bgcolor", "#FFFAFA");
                cell2.setAttribute("border", "0");
                cell2.onclick = function() { populateName(cell1); } ;

                //한글 필드 가져옴
                txtNode = document.createTextNode(nameData.stdName);
                cell2.appendChild(txtNode);
                row.appendChild(cell2);

                nameTableBody.appendChild(row);
				//alert(nameData.id+" : "+nameData.name);

            });

        }

        function setOffsets() {
            var end = inputField.offsetWidth;
            var left = calculateOffsetLeft(inputField);
            var top = calculateOffsetTop(inputField) + inputField.offsetHeight;

            completeDiv.style.border = "black 1px solid";
            completeDiv.style.left = left + "px";
            completeDiv.style.top = top + "px";
            nameTable.style.width = end + "px";
        }

        function calculateOffsetLeft(field) {
            return calculateOffset(field, "offsetLeft");
          }

          function calculateOffsetTop(field) {
            return calculateOffset(field, "offsetTop");
          }

          function calculateOffset(field, attr) {
            var offset = 0;
            while(field) {
              offset += field[attr];
              field = field.offsetParent;
            }
            return offset;
          }

          var isFirst = true;
          function populateName(cell) {
        	  var addChar = "";
        	  if(isFirst){
        		  isFirst = false;
        		  $("#left_area").html($("#left_area").val()+cell.firstChild.nodeValue);
        	  }else if(selectedOption == ""){
            	  addChar = cell.firstChild.nodeValue.charAt(0).toUpperCase()+cell.firstChild.nodeValue.substring(1);
            	  $("#left_area").html($("#left_area").val()+addChar);
              }else if(selectedOption == "_"){
            	  $("#left_area").html($("#left_area").val()+"_"+cell.firstChild.nodeValue);
              }

              clearNames();
              inputField.value = null;
          }

        function clearNames() {
            var index = nameTableBody.childNodes.length;
            for (var i = index - 1; i >= 0 ; i--) {
                 nameTableBody.removeChild(nameTableBody.childNodes[i]);
            }
            completeDiv.style.border = "none";
            //inputField.value = null;
        }

		// radio button 제어
		var selectedOption = "_";
		function selectOption(selected){
			if(selected == "under"){
				$('input:radio[name="case"]').attr("checked", false);
				selectedOption = "_";
			}else if(selected == "case"){
				selectedOption = "";
				$('input:radio[name="under"]').attr("checked", false);

			}else if(selected == "findId"){
				$('input:radio[name="findName"]').attr("checked", false);
			}else{
				$('input:radio[name="findId"]').attr("checked", false);
			}
		}
		

        function clickEnter(){
        	isFirst = true;
        	$("#left_area").html($("#left_area").val()+"\n");
        }
*/

$(document).ready(function(){
	var stdNamesList;
	var lineFlag = true;
    submitPost(document.makeNameForm, initCallback);
    
   
    
	function initCallback(data){
		//기본값    	
		stdNamesList = data.matchedNameKo;
		//alert(stdNamesList);
		  $("input#autocomplete").autocomplete(stdNamesList);
	}
/*     $("#findId").cilck(function(){
    		alert("findID");
    		//stdNamesList = data.matchedNameEn;
    	}); 
    	$("#findName").cilck(function(){
    		alert("findNm");
    		//stdNamesList = data.matchedNameKo;
    	});  */
	
	 $('#autocomplete').keypress(function(event) {
	        if (event.keyCode == 13) {
	        	onEnterKeyPress();
	        }
	        if (event.keyCode === 10 || event.keyCode == 13 && event.ctrlKey) {
	        	//alert("ctrl+enter");
	        	$("#left_area").html($("#left_area").val()+"\n");
	        	lineFlag = true;
	        }
	        
	    });
    	
    	function onEnterKeyPress(){
    		if($("#left_area").val()==""){
	        	//	alert("11");
	        	  $("#left_area").html($('#autocomplete').val().split(":")[1]);
	        	  lineFlag = false;
	        	}else{
	        	//alert("22");
	        		var underBar  = lineFlag?"":"_";
	        		//alert(underBar);
	        	  $("#left_area").html($("#left_area").val() + underBar +  $('#autocomplete').val().split(":")[1]);
	        	  lineFlag = false;
	        	}
	        	$('#autocomplete').val("");
    	}

});


    </script>
</head>
<body>
<h1>${title}</h1>
<p class="Margin20"/>

    <table width="70%" border="0" cellspacing="0" cellpadding="0">
    <form name="makeNameForm" action="./makeName" method="post">
      <tr>
        <td width="30%" class="HeadCol">필드 생성 방법</td>
        <td class="ListCol"><input type="radio" name="under" checked="true" onclick="javascript:selectOption('under')"></input> 언더 바 사용 (ex: aaa_bbb) </td>
        <td class="ListCol"><input type="radio" name="case" onclick="selectOption('case')"></input> 대소문자 사용 (ex: aaaBbb)</td>
      </tr>
      <tr>
        <td width="30%" class="HeadCol">찾기 옵션</td>
        <td class="ListCol"><input type="radio" name="findId" id ="findId" onclick="javascript:selectOption('findId')"></input> 필드명으로 찾기 </td>
        <td class="ListCol"><input type="radio" name="findName"  id="findName" checked="true"  onclick="selectOption('findName')"></input> 뜻으로 찾기</td>
      </tr>
      <input type="hidden"  id="names" name="names" value="init" />
      </form>
      <tr>
        <td class="HeadCol">찾기</td>
        <td class="ListCol" colspan="2">
        <!--  ver.1
    	<input type="text" autocomplete="off" size="80%" id="names" name="names" onkeyup="javascript:findWord(document.makeNameForm);" /> -->
		 한글검색- [Enter:입력]/[Cntrl+Enter:줄바꿈]<br>	
		 <input id="autocomplete" size="60%"/>
    	<!-- <div style="position:absolute;" id="popup">
        	<table id="name_table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="0">
            <tbody id="name_table_body"/>
        	</table> 
       <br>
    	</div>-->
    		<table border="0" cellspacing="0" cellpadding="0" align="right">
		            <tr>
		              <td class="bt02_L">&nbsp;</td>
		              <td class="bt02_bg02"><img id="nextLineBtn" src="img/btn_dn.gif" width="13" height="13" /></td>
		              <td class="bt02_bg">입력</td>
		              <td class="bt02_R">&nbsp;</td>
		              <td class="bt02_bg02"><img id="nextLineBtn" src="img/btn_dn.gif" width="13" height="13" /></a></td>
		              <td class="bt02_bg">다음라인</td>
		              <td class="bt02_R">&nbsp;</td>
		            </tr>
				</table>
    	</td>
      </tr>
    </table>
      	
    <p class="Margin15"/>
    <table width="60%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td class="subTitle">생성 결과</td>
            </tr>
        </table></td>
      </tr>
    </table>
    <p class="Margin5"/>
    <table width="60%"  border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td valign="top" class="box02" >
	        <table width="100%" border="0" cellspacing="0" cellpadding="0">
	          <tr>
	            <td class="HeadCol02">필드 명</td>
	          </tr>
	          <tr>
	            <td class="ListCol">
	            <textarea id="left_area" name="input" rows="10" cols="100%" spellcheck="false"></textarea></td>
	          </tr>
	        </table>
        </td>
      </tr>
    </table>
</body>
</html>